<template>
	<div class="page-spots-list">
		<c_header :title="title" :leftOptions="{showBack: false}" :rightOptions="{showMore: true}"></c_header>
		<div class="spots-search-wrap">
			<div class="spots-search">
				<group class="spots-input">
					<x-input 
						v-model="keyword" 
						:max="30" 
						placeholder="请输入景点关键词" 
						@on-enter="spots(keyword)" 
						@on-change="reset"
						class="fs-normal">
						<x-button 
							type="warn" 
							slot="right" 
							@click.native="spots(keyword)" 
							mini 
							class="search-btn fs-normal">查询</x-button>
					</x-input>
				</group>
			</div>
		</div>
		
		<div class="spots-list" v-if="list && list.contentlist.length != 0">
			<ul>
				<li v-for="item in list.contentlist" @click="viewDetail(item)">
					<div class="list-image"><img :src="item.picList[0] && item.picList[0].picUrl"/></div>
					<div class="list-content">
						<h2 class="fs-big">{{item.name}}</h2>
						<div class="fs-small" v-html="item.summary"></div>
						<div class="fs-small" v-html="description(item)"></div>
					</div>
				</li>
			</ul>
			<load-more :show-loading="showLoading" class="load-more" :tip="showLoading ? '正在加载' : '加载完成'"></load-more>
		</div>
		
		<div class="spots-empty" v-show="list && list.contentlist.length == 0">查询结果为空</div>
		
		<div class="spots-hot" v-show="!list || list.contentlist.length == 0">
			<h2>热门景点</h2>
			<ul>
				<li v-for="item in hot" @click="spots(item.name)"><div><img :src="item.image"><span>{{item.name}}</span></div></li>
			</ul>
		</div>
		<c_sidemenu></c_sidemenu>
	</div>
</template>

<script>
import c_header from '@/components/c_header'
import c_sidemenu from '@/components/c_sidemenu'
import { XInput, Group, XButton, LoadMore } from 'vux'

export default {
	name: 'spots_list',
	data () {
		return {
			title: '景点大全',
			keyword: '',
			hot: [
				{
					name: '琅琊山',
					image: '/static/images/jd1.jpg'
				},
				{
					name: '丽江古城',
					image: '/static/images/jd2.jpg'
				},
				{
					name: '安徽宏村',
					image: '/static/images/jd3.jpg'
				},
				{
					name: '环洱海双层豪华旅游大巴(环洱海一卡通)',
					image: '/static/images/jd4.jpg'
				},
				{
					name: '朱家角古镇',
					image: '/static/images/jd5.jpg'
				},
				{
					name: '丽江泸沽湖',
					image: '/static/images/jd6.jpg'
				}
			],
			list: null,
			page: 1,
			showLoading: false
		}
	},
	computed: {
		
	},
	components: {
		c_header, c_sidemenu, XInput, Group, XButton, LoadMore
	},
	methods: {
		spots (keyword) {
			if(keyword){
				this.$vux.loading.show('数据加载中...')
				this.keyword = keyword
				this.$getData.spots({keyword}, (response) => {
					this.list = response.data.showapi_res_body.pagebean
					this.page = this.list.currentPage
					if(this.list.allPages > 1){
						document.body.onscroll = this.loadMore
					}
					this.$vux.loading.hide()
				})
			}else{
				this.$vux.toast.text('请输入景点信息', 'bottom')
			}
		},
		viewDetail (data) {
			this.$emit('input', data)
			this.$router.push({name: 'spots-detail', query: {name: data.name}})
		},
		description (item) {
			return item.address || item.cityName || item.areaName
		},
		loadMore () {
			let offsetTop = document.querySelector(".load-more").offsetTop
			let bodyHeight = window.getComputedStyle(document.documentElement, null).height.replace('px', '')
			if(document.body.scrollTop > offsetTop - bodyHeight){
				if(this.page >=this.list.allPages){
					this.showLoading = false
				}else if(!this.showLoading){
					this.showLoading = true
					this.page ++
					this.$getData.spots({keyword: this.keyword, page: this.page}, (response) => {
						this.list.contentlist = this.list.contentlist.concat(response.data.showapi_res_body.pagebean.contentlist)
						this.list = Object.assign({}, this.list)
						this.showLoading = false
					})
				}
			}
		},
		reset () {
			if(this.keyword == ''){
				this.list = null
				document.body.onscroll = null
			}
		}
	},
	mounted () {
		document.title = this.title
	},
	activated () {
		if(this.list && this.list.allPages > 1){
			document.body.onscroll = this.loadMore
		}
	},
	deactivated () {
		document.body.onscroll = null
	}
}
</script>

<style>
	.page-spots-list{background: #fff;}
	
	.spots-search-wrap{background: url(/static/images/spots-bg.jpg) no-repeat center; background-size: cover;position: relative;padding: 1.5rem 1rem;}
	.spots-search .weui-cells{margin-top: 0;}
	.spots-input{border-radius: 5px;overflow: hidden;background: #fff;}
	.weui-cells:before, .weui-cells:after{display: none;}
	.weui-cells .weui-cell{padding: 7px 7px 7px 15px;}
	.spots-empty{text-align: center;padding: 2rem 0 1rem;}
	
	.spots-hot{padding: .6rem;}
	.spots-hot h2{padding-bottom: .3rem;}
	.spots-hot ul{display: flex;-webkit-flex-flow: wrap;}
	.spots-hot li{-webkit-flex:auto;-webkit-box-sizing: border-box;-webkit-flex-basis: 50%;padding: .3rem 0;}
	.spots-hot li:nth-child(even){padding-left: .3rem;}
	.spots-hot li:nth-child(odd){padding-right: .3rem;}
	.spots-hot li>div{position: relative;width: 100%;padding-top: 68%;border-radius: 6px;overflow: hidden;}
	.spots-hot li img{width: 100%;height: 100%;object-fit: cover;position: absolute;left: 0;top: 0;}
	.spots-hot span{position: absolute;left:50%;top:50%;transform: translate(-50%, -50%); color: #fff;text-shadow: 1px 1px 2px #000;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 80%;text-align: center;}
	
	.spots-list{padding: .6rem;}
	.spots-list li{border-radius: 6px;overflow: hidden;position: relative;margin-bottom: .6rem;padding-top: 42%;background: #e22f0c;}
	.spots-list li .list-image{position: absolute;left: 0;top: 0;right:0;bottom:0;overflow: hidden;}
	.spots-list li .list-image img{width: 100%;height: 100%;object-fit: cover;}
	.spots-list li .list-content{position: absolute;left: 1rem;right: 1rem;top: 50%;transform: translateY(-50%);color: #fff;text-align: center;}
	.spots-list li h2, .spots-list li .list-content div{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;text-shadow: 1px 1px 2px #000;}
	.spots-list li .list-content div{margin-top: .5rem;}
</style>